<template>
  <div>
    <el-tree
      :data="treeData"
      :props="defaultProps"
      accordion
      @node-click="handleNodeClick"
    />
  </div>
</template>
<script>
import { getTree } from '@/api/userManagement.js'

export default {
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  created() {
    getTree().then(res => {
      console.log(res)
      this.treeData = res
    })
  },
  methods: {
    handleNodeClick(node) {
      const nodeId = node.id
      this.$emit('nodeClicked', nodeId)
      this.$emit('nodeNameClicked', this.getNodeNames(node))
    },
    getNodeNames(node) {
      const names = [node.name]
      if (node.children) {
        for (const child of node.children) {
          names.push(...this.getNodeNames(child))
        }
      }
      return names
    }
  }
}
</script>
